  <template>
  	<view class="padding-30 bg-white">
  		<view v-if="!isNext">
			<view class="label-box">请输入手机号</view>
			<view class="input-box align-items-center">
			    <input type="number" placeholder="请输入手机号" v-model="phone" class="flex-1">
			
			</view>
			<view class="label-box">验证码</view>
			<view class="input-box align-items-center">
			    <input type="text" placeholder="输入验证码" class="flex-1">
			    <view class="wrap">
			        <u-toast ref="uToast"></u-toast>
			        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
			        <u-button @tap="getCode" type="text">{{Newtips}}</u-button>
			    </view>
			</view>
			<view class="next-box" @click="next">下一步</view>
		</view>
        <view v-else>
            <view>
                <view class="label-box">设置密码</view>
                <view class="input-box align-items-center">
                    <input type="safe-password" placeholder="请设置密码" v-model="password" class="flex-1">

                </view>
                <view class="label-box">确认密码</view>
                <view class="input-box align-items-center">
                    <input type="safe-password" placeholder="请再次确认密码" v-model="confirmPassword" class="flex-1">
                    
                </view>
            </view>
                <view class="next-box" @click="next">确定</view>
        </view>
  	</view>
  </template>

  <script>
  	export default {
  		data() {
  			return {
  				tips: '',
  				// refCode: null,
  				seconds: 60,
                isNext:false,
                phone:'',
                Newtips:"",
				password:'',
				confirmPassword:""
  			};
  		},
  		methods: {
            next(){
                this.isNext = true;
            },
  			codeChange(text) {
  				this.tips = text;
  			},
  			getCode() {
  				if (this.$refs.uCode.canGetCode) {
  					// 模拟向后端请求验证码
  					uni.showLoading({
  						title: '正在获取验证码'
  					})
  					setTimeout(() => {
  						uni.hideLoading();
  						// 这里此提示会被this.start()方法中的提示覆盖
  						uni.$u.toast('验证码已发送');
  						// 通知验证码组件内部开始倒计时
  						this.$refs.uCode.start();
  					}, 2000);
  				} else {
  					uni.$u.toast('倒计时结束后再发送');
  				}
  			},
  			end() {
  				uni.$u.toast('倒计时结束');
  			},
  			start() {
  				uni.$u.toast('倒计时开始');
  			}
  		}
  	}
  </script>

  <style lang="scss" scoped>
	  
  	.input-box {
  		height:90rpx;
  		background: #FFFFFF;
  		border-radius: 14rpx; 
  		border: 1px solid #DBDBDB;
		input {
			padding: 0 30rpx;
			font-size: 30rpx
		}
  	}
    .label-box {
        line-height: 90rpx;
        color: #999;
        font-size: 28rpx;
        color: #000;
    }
  	.next-box {
  		height: 90rpx;
  		margin-top: 120rpx;
  		background: #43ABC4;
  		color: #fff;
		text-align: center;
  		font-size: 28rpx;
		line-height: 90rpx;
  	}

  	</style>